window.addEventListener('load', function() {
    let focus = this.document.querySelector('.focus');
    let arrowL = this.document.querySelector('.arrow-l');
    let arrowR = this.document.querySelector('.arrow-r');

    focus.addEventListener('mouseover', function() {
        clearInterval(CarouselImage);
        CarouselImage = null;
        arrowL.style.display = 'block';
        arrowR.style.display = 'block';
    });
    focus.addEventListener('mouseout', function() {
        CarouselImage = setInterval(function() {
            arrowR.click();
        }, 1500);
        arrowL.style.display = 'none';
        arrowR.style.display = 'none';
    });

    let ul = focus.querySelector('ul');
    let lis = ul.querySelectorAll('li');
    let circle = focus.querySelector('.circle');
    for (let i = 0; i < lis.length; i++) {
        let li = this.document.createElement('li');
        li.setAttribute('index', i);
        circle.appendChild(li);
    }
    let firstCopy = ul.children[0].cloneNode(true);
    ul.appendChild(firstCopy);
    let circles = circle.children;
    circles[0].className = 'current';
    let focusWidth = focus.offsetWidth;



    for (let i = 0; i < circles.length; i++) {
        circles[i].addEventListener('click', function() {
            for (let i = 0; i < circles.length; i++) {
                circles[i].className = '';
            }
            this.className = 'current';
            let indexNow = this.getAttribute('index');
            count = i;
            animate(ul, -focusWidth * indexNow);
        })
    }

    let count = 0;
    let flag = true
    arrowR.addEventListener('click', function() {
        if (flag) {
            flag = false;
            if (count == lis.length) {
                ul.style.left = 0 + 'px';
                count = 0;
            }
            let n = (count + 1) % lis.length;
            for (let i = 0; i < circles.length; i++) {
                circles[i].className = '';
            }
            circles[n].className = 'current';
            animate(ul, -focusWidth * (++count), function() {
                flag = true;
            });
        }

    });

    arrowL.addEventListener('click', function() {
        if (flag) {
            flag = false;
            if (count == 0) {
                ul.style.left = -focusWidth * lis.length + 'px';
                count = lis.length;
            }
            let n = (count - 1) % lis.length;
            for (let i = 0; i < circles.length; i++) {
                circles[i].className = '';
            }
            circles[n].className = 'current';
            animate(ul, -focusWidth * (--count), function() {
                flag = true;
            });

        }

    });

    let CarouselImage = setInterval(function() {
        arrowR.click();
    }, 1500);



});